Design Principles

A simple summary for the everyday designer. Let’s de-mystify some of the principles. There are many articles claiming there are 5, 8, 10, or 12 design principles we as designers must master, on top of the Gestalt Principles. And I understand why there is so much confusion. Nobody seems to make up their minds about how many are there or which ones are principles or guidelines. When looking for the root of each I found these are at the heart of them. There are four universal principles, depending on how you use them you might get different results.

Contrast

One of the most talked about in every article and book I’ve read on the topic. Contrast happens between two elements that are opposite to each other creating a striking difference between them. When using contrast you can create emphasis, tension, or variety. Contrast makes it obvious that the elements belong in different categories. The elements used to create contrast will vary between color, shape, textures, typography, size, or scale depending on what you want to achieve with this principle.

Emphasis

Stong use of contrast causes emphasis. Using contrast to draw attention to an important element of a design.

Tension

Mixed with other principles like balance it can create tension between elements.

Variety

When contrast is used conservately it adds variety to a design, it won’t be the center of attention but it makes the design more interesting.

Repetition

This principle happens when elements are consistently used across a design. It ties together similar elements that otherwise might be considered different by creating associations with intention. I consider this one to be related to the Gestalt Principle of Similarity. It explains that it’s in human nature to group alike things together. Repeating a shape is the most common example, but it’s also used in typography across a website, with colors for a brand. brushstrokes for artists. When a design has rhythm or patterns it’s the repetition principle at play.

Similarity

Humans will naturally group elements that share characteristics regardless of their proximity.

Rhythm

When certain elements are grouped and then repeated this would create a rhythm in the design.

Pattern

Repetition of multiple elements to create a harmonious design.

Balance

Every element that is part of the design can be described as strong or weak, loud or discrete, heavy or light. Important elements will take some space and become loud in the composition. While some other elements will be happy to do a supporting role in the background. Balance is achieved when the designer arranges the elements in a harmonious composition. When you say it feels “just right” it’s probably because it’s well balanced, meaning the design structure feels stable. This can be achieved with order, symmetry, or asymmetry.

Order

Order and Symmetry are considered the same in the Gestalt Principles. I have separated them because they can achieve different results depending on the use of balance. When balance is paired with hierarchy it creates a feeling of order.

Symmetry

The Gestalt explanation says the brain perceives ambiguous shapes in as simple a manner as possible. Here I’m talking about symmetry between a vertical or horizontal axis on a center line. To achieve quiet and static designs symmetry is a good use of balance.

Asymmetry

Asymmetry is also related to a vertical or horizontal axis on a center line. This can also be considered a way of using contrast. This is used to create dynamic and engaging designs. It adds movement and energy, the opposite of symmetry.

Hierarchy

This principle is used to organize the elements in a design according to their importance. This helps the reader or spectator to know where to look first and continue to be guided by the order of the elements. Hierarchy is not only for typography headers, it can be used on colors, values, spacing, and even shapes. The objective is to make apparent where the eyes should focus first. This can be achieved by using proportion, proximity, or continuation.

Proportion

Also known as scale, it refers to the difference between size to signal importance or rank. It’s design implication means the most important elements are bigger than the less important. It’s a good idea to incorporate balance and have small, medium, or big elements in a composition.

Proximity

This is also a Gestalt Principle, it refers to how close the elements are together. Using proximity to overlap or separate objects can create groupings or categories. This is helpful when you want to organize and add structure to a hierarchy.

Continuation

Another Gestalt Principle and the last used in this summary. It says the human eye will follow the smoothest path when viewing lines, regardless of how they are drawn. This is a valuable tool to guide the eye of the observer across our composition. Starting from the most important to the less.

Conclusion

Let’s see some examples. How do the principles interact with each other in designs I stumbled upon on Behance? All images will link to the original artwork, please spare 1 second to appreciate these projects.

Contrast by Variety
The use of different shapes that oppose each other like round vs square shapes, lines vs objects.

Repetition by Rhythm
The way the elements repeat across the composition creates a rhythm.

Balance by Order
The shapes are not random, they are ordered with intention.

Hierarchy by Continuation
The repetition and the order, together it creates a sense of continuation on our eyes, this makes us see the head first and the shapes second.

Contrast by Emphasis
The colorful rainbow is in contrast with the black/white background.

Repetition by Pattern
The element is repeated in a harmonious pattern.

Balance by Symmetry
The pattern is aligned symmetrically along a 45º axis line.

Hierarchy by Proximity
The pattern is the most important element. The elements on the bottom take second stage and are also grouped by proximity.

Contrast by Tension
The elements are in constant tension fighting for attention.

Repetition by Similarity
Similar elements like the round shapes, the colorful yellow are repeated across the piece.

Balance by Asymmetry
There is a sense of asymmetry in the composition.

Hierarchy by Proportion
Certain elements draw our eyes first, these are the most important ones.

And that is all. This is my take on the design principles. Similar to Salt, Fat, Acid, Heat for cooking by Samin Nostrat. Design needs a bit of Contrast, Repetition, Balance and Hierarchy for a good design that will delight our eyes.

What do you think? Did you find this useful? Let me know below.

References